<template>
  <div class="search-list" v-show="searches.length>0">
    <transition-group name="list" tag="ul">
      <li class="search-item" v-for="item in searches" :key="item" @click="selectItem(item)">
        <span class="text">{{item}}</span>
        <span class="icon" @click.stop="delateOne(item)">
          <i class="icon-delete"></i>
        </span>
      </li>
    </transition-group>
  </div>
</template>

<script>
  export default {
    name: 'SearchList',
    props: {
      searches: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    methods: {
      selectItem(item) {
        this.$emit('select', item)
      },
      delateOne(item) {
        this.$emit('delateHistory', item)
      }
    },
  }

</script>
